---
sidebar_position: 1
title: DevTools Plugin
sidebar_label: Overview
---

[Read the API Reference »](/docs/api/plugin-devtools/Functions/DevtoolsPlugin.mdx)

Devtools plugin allow you to connect your application to a [HyperFlow](/docs/hyper-flow). It allows you to inspect the
requests and responses, inspect and modify cache and to control the requests.

---

:::tip Purpose

1.  **Real-time Request Inspection**: Monitor all incoming and outgoing requests and their corresponding responses
    within your application in real-time.
2.  **Advanced Cache Management**: Gain full control over the cache, allowing you to inspect, modify, and clear cached
    data on the fly.
3.  **Interactive Request Control**: Manage your application's data flow with options to cancel, pause, and resume
    requests directly from the devtools.

:::

---

## Install the Plugin

Install the ESLint plugin using npm or yarn:

```bash npm2yarn2pnpm
npm install @hyper-fetch/plugin-devtools
```

---

## Usage

Import the plugin and use it in your application:

(@import plugin-devtools DevtoolsPlugin type=import)

```tsx
import { DevtoolsPlugin } from "@hyper-fetch/plugin-devtools";

const client = new Client({ url: "http://localhost:3000" }).addPlugin(
  DevtoolsPlugin({
    // highlight-start
    appName: "My App",
    // highlight-end
  }),
);
```

(@import plugin-devtools DevtoolsPluginOptions type=returns)

<LinkCard
  type="promo"
  title="HyperFlow"
  description="Learn more about HyperFlow devtools and how to use it"
  href="/docs/hyper-flow"
/>
